<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">实时监控</a>
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: '/infoService' //数据接口
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": res.totalElements, //解析数据长度
                    "data": res.content //解析数据列表
                };
            }
            ,page: true //开启分页
            ,cols: [
                [ //表头
                {field: 'id', title: 'ID', width:80,  fixed: 'left'}
                ,{field: 'ipAddress', title: '服务器IP地址', width:160}
                ,{field: 'cpuUsage', title: 'cpu负载情况', width:160, sort: true}
                ,{field: 'diskUsage', title: '硬盘使用情况（%）', width:200, sort: true}
                ,{field: 'memoryUsage', title: '内存使用情况（%）', width: 200, sort: true}
                ,{fixed: 'right', width: 150, align:'center', toolbar: '#barDemo'}
                ]]
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                console.log(data.ipAddress)
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
               //跳转到监控页面,把ip地址携带过去
               //window.location.href='monitor.html?ipAddress='+data.ipAddress
                //
                window.open( 'monitor.html?ipAddress='+data.ipAddress, "_blank" )
            }
        });
    });
</script>
</body>
</html>
